import React, { Component ,createRef} from 'react';
import { LockOutlined, UserOutlined ,KeyOutlined} from '@ant-design/icons';
import { Button, Form, Input ,Space,message} from 'antd';
import Captcha from '@/components/Captcha';
import url from '@/config/url';
import axios from '@/http/http'
import Cookies from 'js-cookie'
import {withRouter} from 'react-router-dom'
class Normallogin extends Component {
    state = {
        key : '', // 图形验证码对应的标识符
    }
    ref1 = createRef()
    render() {
        return (
            <div>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    >

                        {/* 用户名 */}
                    <Form.Item
                        name="username"
                        rules={[
                        {
                            required: true,
                            message: '请输入用户名!',
                        },
                        ]}
                    >
                        <Input size="large" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                    </Form.Item>

                    {/* 密码 */}
                    <Form.Item
                        name="password"
                        rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                        ]}
                    >
                        <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密&nbsp;&nbsp;&nbsp;码"
                        size="large"
                        />
                    </Form.Item>

                    {/* 用Space组件设置间距 */}
                    <Space>
                        {/* 验证码 */}
                        <Form.Item
                            name="captcha"
                            rules={[
                            {
                                required: true,
                                message: '请输入验证码!',
                            },
                            ]}
                        >
                            <Input
                            prefix={<KeyOutlined className="site-form-item-icon" />}                          
                            type="password"
                            placeholder="验证码"
                            size="large"
                            />
                        </Form.Item>

                        <Form.Item>
                            {/* 验证码img */}
                            {/* 这里需要传参数，不传会报错，利用 prop-types 模块来传 */}
                            {/* 在UI组件中嵌套了一个自己的组件 */}
                            <Captcha getKey={this.getKey} w={130} h={39} ref={this.ref1}></Captcha>
                        </Form.Item>
                    </Space>
                    
                        <Form.Item>
                            <Button size="large" block={true} type="primary" htmlType="submit" className="login-form-button">
                            登录
                            </Button>
                        </Form.Item>
                    </Form>
            </div>
        );
    }
    // 把父组件中的getKey传给子组件，这里的形参就是父组件传递的实参
    getKey = (key) =>{
        // console.log(key)
        this.setState({
            // 父组件传过来的key
            key: key
        })
    }  
    // 登录事件
    onFinish = (values) => {
        console.log('Received values of form: ', values);
        values.key=this.state.key
        axios.post(url.pwdLogin,values).then((res) =>{
            
            if(res.data.errNo === 0){
                // 成功提示
                message.success('登录成功',1);
                // 将后端返回的token(jsonwebtoken),也就是jwt
                Cookies.set('jwt', res.data.context.jwt)
                // 将后端返回的菜单项数组存到本地
                localStorage.setItem('acl', JSON.stringify(res.data.context.acl))
                // 路由跳转到首页   因为是一级路由，没有路由参数，用withRouter
                this.props.history.push('/dashboard')
            }else{
                // 失败提示
                message.error(res.data.errText,1.5);
                // 通过ref在组件上用父组件上的属性和方法
                this.ref1.current.loadCaptcha()
            }
            // console.log(res)
        }).catch((e) =>{})
    };
          
}
export default withRouter(Normallogin) ;

